/******************************/

@four : 4;

/*****************************/
body{
  background: #fff;
}
// 头部
.container{
  position: relative;
  width:80%;
  margin:0 10%;
  height:0.69rem;
  //border:1px solid #ccc;
  margin: 0 auto;
  background: #fff;
  display: flex;

  .top-logo{
    display: block;
    width:1.37rem;
    height:100%;
    display: flex;
    img{
      display: block;
      width:100%;
      align-self: flex-end;
    }
  }
  .top-input-group{
    position: absolute;
    right:3rem;
    height:100%;
    display: flex;
    align-items: flex-end;
    input{
      border:1px solid #ff3c3c;
      display: block;
      height:0.4rem;
      padding: 0 0.2rem;
      width:3.8rem;
      font-size: 0.16rem;
    }
    button{
      border:0;
      background: 0;
      display: block;
      font-size: 0.16rem;
      &.search-button{
        background: #ff3c3c;
        color: #fff;
        height:0.40rem;
        width:1rem;
      }
      &.all-classify{
        border:1px solid #ff3c3c;
        margin-left:0.1rem;
        height:0.4rem;
        padding:0 0.2rem;
        color: #ff3c3c;
      }
    }
  }
  .yp-logo{
    display: block;
    width:2.20rem;
    height:100%;
    display: flex;
    position: absolute;
    right:0.4rem;
    img{
      display: block;
      width:100%;
      align-self: flex-end;
    }
  }
}
// 主页导航条
.top-navbar{
  height:0.4rem;
  margin-top:0.24rem;
  width:100%;
  border-top:1px solid #f1f1f1;
  border-bottom:1px solid #ff3c3c;

  nav{
    width:80%;
    margin:0 auto;
    height:100%;
    //background:#ff3c3c;
    ul{
      height:100%;
      float: left;
      li{
        float: left;
        width:1rem;
        line-height:0.4rem;
        text-align: center;
        font-size: 0.16rem;
        margin-left: 0.04rem;

        &:nth-child(1){
          margin:0;
        }

        &.on{
          background: #ff3c3c;

          a{
            color:#fff;
          }
        }
      }
    }
    .login-and-registe{
      float: right;
      height:100%;
      line-height: 0.4rem;
      font-size: 0.16rem;
      
      span{
        color: #f1f1f1;
      }
    }
  }
}
// 轮播图
.carousel{
  width:100%;
  position: relative;
  height:3.40rem;
  overflow: hidden;
  &:hover .carousel-control{
    opacity: 1;
  }
  .slide-img{
    position: relative;
    width:100%;
    height:3.40rem;
    li{
      position: absolute;
      width:100%;
      //display: none;
      opacity: 0;
      &.active{
        //display: block;
        opacity: 1;
        transition: all 1s;
      }
      img{
        width: 140%;
        transform: translateX(-14%);
      }
    }
  }
  .slide-btn{
    position: absolute;
    bottom:10%;
    width:100%;
    text-align: center;
    li{
      display: inline-block;
      text-align: center;
      width:0.1rem;
      height:0.1rem;
      border-radius: 50%;
      background: #eee;
      margin: 0 0.04rem;
      cursor: pointer;
      
      &.active{
        background: #fff;
      }
    }
  }
  .carousel-control{
    position: absolute;
    bottom:50%;
    transform: translateY(50%);
    font-size: 0.4rem;
    font-family: "幼圆";
    color: #fff;
    height:0.7rem;
    line-height:0.7rem;
    text-align: center;
    width:0.5rem;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition:  opacity 0.4s;
  }
  .prev{
    left:0;
    border-bottom-right-radius: 0.1rem;
    border-top-right-radius: 0.1rem;
  }
  .next{
      right:0;
      border-bottom-left-radius: 0.1rem;
      border-top-left-radius: 0.1rem;
  }
}
// 精彩推荐
.recommend-wrap{
  width: 100%;
  background: #f1f1f1;
  transform: translateY(-0.04rem);
  &::after{
    content: "";
    display: block;
    clear: both;
  }
  .recommend{
    width: 80%;
    margin: 0 auto;
    padding-top: 0.3rem;
    
    .recommend-nav{
      width: 100%;
      // overflow: hidden;
      height: 0.4rem;
      line-height: 0.4rem;
      border-bottom: 1px solid #eee;
      a{
        float: left;
        font-size: 0.2rem;
        color: rgb(143, 143, 143);
        // padding: 0 0.2rem;
        width: 1.2rem;
        text-align: center;
        // transform: translateX(-0.16rem);
        height: 100%;
        
        &:nth-child(1){
          padding-left: 0;
        }
        &.active{
          color: #000;
          font-size: 0.24rem;
          font-weight: bold;
          border-bottom: 1px solid #ff3c3c;
        }
      }
    }
    .recommend-content{
      width: 100%;
      padding-top: 0.2rem;
      .each-recommend{
        width: 100%;
          box-sizing: border-box;
        &>div{
          width: 95.5%/3;
          height: 3.4rem;
          margin-left: 1.5% ;
          margin-bottom: 1.5%;
          // border: 1px solid #ccc;
          border-radius: 0.1rem;
          overflow: hidden;
          float: left;
          background: #fff;
          transition: all 0.3s;
          &:hover{
            transform: translateY(-0.1rem);
            box-shadow: 0 0.1rem 0.1rem 0.05rem #ccc;
          }
          
          .each-recommend-img{
            display: block;
            width: 100%;
            height: 63%;
            margin-bottom: 2%;
            background: url(https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2701646041,3975227449&fm=26&gp=0.jpg) no-repeat;
            background-size: 100%;
            img{
              width: 100%;
              display: block;
              // height: 100%;
            }
          }

          .each-recommend-items{
            padding: 0.18rem;

            .each-recommend-descript{
              font-size: 0.16rem;
              color: #666;
              display: block;
            }
            .avatarandnick{
                float: left;
                margin-top: 0.14rem;
               .avatar{
                  float: left;
                  width: 0.32rem;
                  height: 0.32rem;
                  border-radius: 50%;
                  border: 1px solid #ccc;
                  overflow: hidden;
              }
              .nick{
                font-size: 0.14rem;
                color: #666;
                display: inline-block;
                float: left;
                height: 0.30rem;
                line-height: 0.30rem;
              }
            }
            .past-time{
              margin-top: 0.14rem;
              float: right;
              line-height: 0.3rem;
              font-size:0.14rem; 
              color: #bbb;
            }
          }
        }
      }
    }
  }
}